OINK
UX/UI DESIGN. PROTOTYPE. MOTION DESIGN.
This project started off as a side hobby by my friend as a solo developer. Fast forward to today, I decided to use his game (still a WIP) as a concept to make a project out of it. The initial game core loop was already established and he had the game and environment art roughed out. I offered to give a complete UX, UI and motion design overhaul that is reinforced by elaborate research and competitor analyses. This is a solo project as far as interface designs go, I take no credit in game art.
Oink is a digital multiplayer board game on the PC platform, designed to be a casual family-friendly game that can support up to 4 players. You can choose different characters that offer different subset of stats, and customize your own card deck to play against your friends.
The scope of the work involved designing the information architecture and interfaces from the game’s initial title screen till the start of official gameplay.
01 RESEARCH (MINDMAP + MOODBOARDS)
The first part of the research process was to create a mind map of keywords that resonate with the game my friend envisioned.
I received the game build in Unity and was sifting through assets and scenes that had already been created. I also exported all assets manually from the build to use for this design project.
After that, I gathered research material and references to narrow down key aspects that are appropriate for the game. The research’s main focus has realized a preference for pastel palettes, soft shape language and playful elements. Typography was also to be considered and a sans-serif font would be more suitable.
02 UX DESIGN (UX FLOW + WIREFRAMES + PROTOTYPE)
The next step was to structuralize the information architecture at work from start to end. This was important in understanding the number of screens necessary for game setup. I wanted to design something that could be as conventional and easy-to-use
as possible.
The main challenge in some of these screens was to determine the right balance of complexity for the information shown. As this game is targeted for a casually wide range of audience, I didn’t want any screens to be overloaded with information. The game was desired to be learned visually, but not so abstract that it would be hard to understand. Information should also be easily processed without having to overly strain the users’ attention. In order to create such user friendly experience, the solution was to simplify processed information. This means more accompaniments of iconography and imagery, and less text unless required.
Once the UX flow was completed, I moved on to creating wireframes on Figma, and made a prototype out of it.
01 - TITLE SCREEN (LEFT). 02 - CHARACTER SELECT (RIGHT)
03 - DICE SELECT (LEFT). 04 - DECK CUSTOMIZATION (RIGHT)
05 - GAME START (LEFT). 06 - GAMEPLAY (RIGHT)
Screen recording of Oink's Figma prototype
03 UI DESIGN
After UX comes UI! I had a lot of fun working with a soft pastel palette, but that required me to work with limitations since designing with light colors meant visual contrasts were limited. To counter this, fill and blur overlays were applied as backers behind some containers.
01 - TITLE SCREEN (LEFT). 02 - CHARACTER SELECT (RIGHT)
03 - DICE SELECT (LEFT). 04 - DECK CUSTOMIZATION (RIGHT)
05 - GAME START (LEFT). 06 - GAMEPLAY (RIGHT)
04 ANIMATION + STYLE GUIDE
Last but not least, I explored some motion concepts for certain elements that could have unique and playful motion states! Below is a motion comp of the title screen, set of breakdowns, design and motion style guides made for the remainder of other key game assets.
A previz of what the title screen might look like if it were to be fully animated. Theoretically, hitting Start Game would initialize the game setup sequence.
As a final stretch, I also thought the star had potential in being animated
